<template>
	<view class="content">
		<view class="detial-head">
			<view class="detial-title">
				<view 
				class="shop-detial"
				v-for="(item,index) in Text" 
				:key="index"
				:class="selectTitle === index ? 'bottom-color':''"
				@tap="changTap(index)"
				>{{item.name}}</view>
			</view>
		</view>
		<view style="padding-top: 76rpx;">
			<view class="" v-if="selectTitle==0">
				<shopDetial :dataList="detialData"></shopDetial>
				<Card style="margin-top: -100rpx;" cardTitle="看了又看"></Card>
				<CommodityList :dataList="RecommendData"></CommodityList>
			</view>
			<view class="" v-else>
				<shopComment :shopId="JSON.stringify(id)" :type="JSON.stringify(shopType)"></shopComment>
			</view>
		</view>
		<!-- 客服 购物车  -->
		<view class="goods-carts">
			<uni-goods-nav 
			:options="options"  
			:button-group="buttonGroup" 
			@click="onClick($event)"
			@buttonClick="buttonClick($event)" 
			/>
			<!-- 弹出框 -->
			<uni-popup 
			class="popup" 
			ref="popup" 
			type="bottom" 
			background-color="white"
			>
				<view class="shop-list">
					<view class="shop-item" v-for="(item,index) in detialData" :key="index">
						<image class="shop-img" :src="item.imgUrl" mode=""></image>
						<view class="shop-text">
							<text class="shop-name">{{item.name}}</text>
							<view class="shop-price">
								<text class="money">￥{{totalPrice}}</text>
								<view class="shop-num">
									<uni-icons custom-prefix="custom-icon" type="minus-filled" size="30" @tap="shopNumReduce"></uni-icons>
									<input class="shop-num-input" type="text" v-model="inputNum" >
									<uni-icons custom-prefix="custom-icon" type="plus" size="30" @tap="shopNumAdd"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<button @tap="submitOrder" class="defineBtn">确定</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Lines from "@/components/common/Lines.vue"
	import shopDetial from "@/components/detial/shopDetial.vue"
	import shopComment from "@/components/detial/shopComment.vue"
	import CommodityList from "../../components/common/CommodityList.vue"
	import Card from "../../components/common/Card.vue"
	import uniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				selectTitle:0,
				// 推荐商品数据
				RecommendData:[],
				// 详情数据
				detialData:[],
				// 商品id
				id:'',
				pageType:'detial',
				num:1,
				// 购买商品数量
				shopCartNumber:'',
				shopCartList:[],
				// 商品类型 促销  热销 推荐
				shopType:'',
				// 记录收藏按钮状态  
				collectStatus:false,
				Text:[
					{name:'商品详情',id:1},
					{name:"商品评论",id:2}
				],
				options: [{
					icon: 'chat',
					text: '客服'
				},{
					icon:'star',
					text:'',
				},{
					icon: 'cart',
					text: '购物车',
					info:''
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				// 收藏商品数据
				CollectData:[],
				// 输入的商品数量
				inputNum:1,
				// 生成订单之后的数据
				shopObj:{}
			}
		},
		onLoad(e) {
			let info = JSON.parse(e.info)
			this.shopType = info.shopType
			this.getCartDate()
			this.RecommendGoodsData()
			this.getDetialData(info.id,info.shopType)
			this.getCollectData()
			this.id = info.id
			this.options[1].text = '收藏'
		},
		components:{
			Lines,
			shopDetial,
			shopComment,
			CommodityList,
			Card,
		},
		computed:{
			...mapState({
				list:state=>state.cart.list
			}),
			...mapGetters({
				listLength:'listLength'
			}),
			
			totalPrice(){
				return this.inputNum*this.detialData[0].pprice
			}
		},
		onNavigationBarButtonTap(e) {
			
		},
		methods: {
			...mapMutations(['addShopCart','clearState','initGetData']),
			change(){
				
			},
			// 获取购物车数据
			getCartDate(){
				$http.request({
					url:"/selectCart",
					method:"POST",
					header:{
						token:true
					}
				}).then((res)=>{
					this.options[2].info = res.length
					this.initGetData(res);
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 请求收藏商品数据
			getCollectData(){
				$http.request({
					url:'/getCollectGoods',
					method:'POST',
					header:{
						token:true
					},
				}).then((res)=>{
					res.forEach((item)=>{
						if(item.shopId == this.id && item.type == this.shopType){
							this.CollectData.push(item)
						}
					})
					if(this.CollectData[0] && this.CollectData[0].status == 1){
						this.options[1].icon = 'star-filled'
						this.options[1].text = '已收藏'
					}else{
						this.options[1].icon = 'star'
						this.options[1].text = '收藏'
					}
				}).catch(()=>{
					
				})
			},
			onClick(e){
				if(e.index == 0){
					uni.navigateTo({
						url:'/pages/chat/chat'
					})
				}else if(e.index == 2){
					uni.navigateTo({
						url:"/pages/shopcart/shopcart?pageType="+this.pageType+""
					})
				}else if(e.index == 1){
					// 添加收藏
					if(this.options[1].text == '收藏'){
						$http.request({
							url:'/addCollect',
							method:'POST',
							header:{
								token:true
							},
							data:{
								shopData:this.detialData[0],
								shopType:this.shopType
							}
						}).then((res)=>{
							if(res.protocol41){
								this.options[1].icon = 'star-filled'
								this.options[1].text = '已收藏'
								uni.showToast({
									title:"收藏成功"
								})
							}
						}).catch(()=>{
							uni.showToast({
								title:"添加收藏失败！",
								icon:'none'
							})
						})
					}else if (this.options[1].text == '已收藏'){
						// 取消收藏
						$http.request({
							url:'/deleteCollect',
							method:'POST',
							header:{
								token:true
							},
							data:{
								id:this.id,
								type:this.shopType
							}
						}).then((res)=>{
							if(res.protocol41){
								this.options[1].icon = 'star'
								this.options[1].text = '收藏'
								uni.showToast({
									title:'已取消收藏',
									iocn:'none'
								})
							}
						}).catch(()=>{
							uni.showToast({
								title:"取消收藏失败！",
								icon:'none'
							})
						})
					}
				}
			},
			buttonClick(e){
				if(e.index == 0) {
					this.addCart()
					this.getCartDate()
				}else if(e.index == 1){
					this.open()
				}
			},
			changTap(index){
				this.selectTitle = index
			},
			//加入购物车
			addCart(){	
				$http.request({
					url:'/addCart',
					method:'POST',
					data:{
						goods_id:this.detialData[0].id,
						num:this.num,
						shopType:this.shopType
					},
					header:{
						token:true
					}
				}).then((res)=>{
					
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
			},
			
			// 立即购买
			open(){
				this.$refs.popup.open()
			},
			changeNumber(value,index,item){
				$http.request({
					url:"/updateNumCart",
					method:"POST",
					header:{
						token:true
					},
					data:{
						goodsId:item.goods_id,
						num:value
					}
				}).then((res)=>{
					this.list[index].num = value;
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			// 商品数量增加
			shopNumAdd(){
				this.inputNum++
			},
			// 商品数量减少
			shopNumReduce(){
				if(this.inputNum>=1){
					this.inputNum--
				}else{
					return;
				}
			},
			// 确定按钮
			submitOrder(){
				// 发起请求
				this.detialData[0].num = this.inputNum
				$http.request({
					url:'/addOrderByNow',
					method:'POST',
					data:{
						// 商品id
						id:this.detialData[0].id,
						// 商品名称
						name:this.detialData[0].name,
						// 商品图片
						imgUrl:this.detialData[0].imgUrl,
						// 商品价格
						pprice:this.detialData[0].pprice,
						// 商品类型
						shopType:this.shopType,
						// 商品数量
						num:this.inputNum
					},
					header:{
						token:true
					}
				}).then((res)=>{
					this.shopObj = res[0]
					// 为数组对象添加属性
					res[0].pageType = this.pageType //detial
					uni.navigateTo({
						url:`/pages/confirm-order/confirm-order?selectedList=${JSON.stringify(res[0])}`
					})
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
			},
			// 请求详情页面数据
			getDetialData(id,type){
				$http.request({
					url:"/detial/getDetialData",
					data:{
						id:id,
						shopType:type
					}
				}).then((res)=>{
					this.detialData = res
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
			},
			// 请求猜你喜欢数据---推荐
			RecommendGoodsData(){
				$http.request({
					url:"/home/getRecommendGoods"
				}).then((res)=>{
					this.RecommendData = res.data
					
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
			}
		}
	}
</script>

<style scoped>
.content {
	padding-bottom: 90rpx;
}
.detial-title {
	width: 100%;
	position: fixed;
	top: 0rpx;
	z-index: 999;
	background-color: aliceblue;
	padding: 10rpx 0rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.bottom-color {
	color: #49BDFB;
	border-bottom: 2rpx solid #49BDFB;
	padding-bottom: 6rpx;
}
.goods-carts {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	position: fixed;
	left: 0;
	right: 0;
	/* #ifdef H5 */
	left: var(--window-left);
	right: var(--window-right);
	/* #endif */
	bottom: 0;
	
}
.popup{
	z-index: 999;
}
.shop-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #e1e1e1;
}
.radio {
	padding: 15rpx;
	width: 220rpx;
	height: 150rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.shop-img{
	width: 150rpx;
	height: 150rpx;
}
.shop-text{
	flex: 1;
	height: 150rpx;
	padding: 15rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.shop-price {
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.shop-num{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 60rpx;
}
.shop-num-input{
	text-align: center;
	width: 60rpx;
	border: 2rpx solid #e1e1e1;
}
.defineBtn{
	width: 100%;
	height: 60rpx;
	text-align: center;
	color: white;
	background-color: #49BDFB;
}
</style>
